#all {
    margin: 0;
    padding: 0;
    background: url('../img/train2.jpg');
    background-size: cover;
    position: absolute;
    height: 100%;
    width: 100%;
}



#result {
    position: absolute;
    margin-top: 10%;
    height: 30%;
    width: 90%;
    left: 5%;
    background: #fff;
    border-radius: 35px;
    opacity: 0.9;
}

#head {
    position: absolute;
    margin-top: 0%;
    margin-left: 5%;
    height: 25%;
    width: 90%;
}

#where {
    color: blue;
    font-size: 200%;
    font-family: Fantasy;
}

#order {
    float: right;
    margin-top: 1%;
}

#order:hover {
    color: blue;
    float: right;
    cursor: pointer;
}

#middle {
    position: absolute;
    margin-left: 5%;
    margin-top: 4%;
    height: 70%;
    width: 90%;
}

#leave_city {
    position: absolute;
    margin-left: 2%;
    width: 25%;
    height: 95%;
    float: left;
    background: #f8f8f8;
    border-radius: 10%;
}

#arrive_city {
    float: left;
    position: absolute;
    margin-left: 27%;
    width: 25%;
    height: 95%;
    background: #f8f8f8;
    border-radius: 10%;
}

#start, #end {
    position: absolute;
    font-size: 120%;
    margin-top: 5%;
    margin-left: 20%;
    color: #999;
    padding-left: 10%;
}

#hot_city {
    border-radius: 12px;
    background: #fff;
    border: 1px solid #71a1e7;
    box-shadow: 0 4px 12px rgb(44 115 207 / 29%);
    position: absolute;
    margin-top: 31%;
    margin-left: 20%;
    width: 150%;
    height: 150%;
    visibility: hidden;
    z-index: 1000;
}
#hot_city_head {
    margin: 0;
    border-radius: 12px;
    color: #333;
    font-weight: 1000;
    padding: 5% 8%;
    background: #f7f7fb;
    font-size: 130%;
}
#hot_city_body {
    list-style: none;
    float: left;
    margin: 0% 0%;
    height: 65%;
    width: 90%;
}

li {
    list-style: none;
    float: left;
    margin: 0;
    margin-left: 0;
    padding: 3% 20% 3% 5%;
    font-weight: 800;
    font-size: 120%;
    border-radius: 10px;
}
li:hover {
    background: rgb(234,245,255);
    cursor: pointer;
}

#start_city, #end_city, #start_date {
    outline-style: none;
    border: 1px solid #ccc;
    border-radius: 15px;
    padding: 13px 14px;
    padding-left: 10%;
    position: absolute;
    margin-top: 15%;
    margin-left: 20%;
    font-size: 25px;
    font-family: "Microsoft soft";
    width: 60%;
    font-weight: 1000;
}

input:focus{
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
}

#start_date {
    width: 70%;
}

#arrive_time {
    float: left;
    position: absolute;
    margin-left: 57%;
    width: 25%;
    height: 95%;
    background: #f8f8f8;
    border-radius: 10%;
}

#research {
    float: left;
    position: absolute;
    margin-left: 87%;
    margin-top: 2%;
    width: 8%;
    height: 60%;
    background: #0086f6;
    border-radius: 20%;
    color: white;
    font-size: 150%;
    font-weight: 1000;
}

#research:hover {
    background-color: #FF3CAC;
    background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);
    float: left;
    position: absolute;
    margin-left: 87%;
    margin-top: 2%;
    width: 8%;
    height: 60%;
    color: white;
}

#go {
    position: absolute;
    margin-left: 10%;
    margin-top: 28%;
    color: white;
}